<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        html,body{
            background-color: #ccc;
        }
        #top{
            width: 400px;
            margin: 10px auto;
            /*background-color: red;*/
            position: relative;
        }
        .yi{
            background-color: white;
        }
        .yi figure{
            margin: 0;
            padding: 15px;
        }
        .yi p{
            padding-top: 15px;
            margin: 0 35px;
            padding-bottom: 10px;
            font-size: 16px;
        }
        .kong{
            width: 395px;
            height: 536px;
            /*background-color: red;*/
            border: 4px solid orange;
            opacity: 0;
            position: absolute;
            top: 0;
            cursor: pointer;
        }
        .er{
            margin-top: 20px;
            background-color: white;
            height: 200px;
            
        }
        .er img{
            margin: 21px;
        }
        .er .tu1{
            display: inline-block;
            position: relative;
            color: white;
        }
        .er .zhezhao1{
            width: 0px;
            height: 154px;
            display: inline-block;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            left: 21px;
            top: 21px;
            cursor: pointer;
            /*display: none;*/
        }
        .er p,h3{
            display: inline-block;
            overflow: hidden;
            margin: 5px 15px;
            font-size: 14px;
            color: white;
        }
        .er h3{
            width: 154px;
            height: 20px;
            margin-top: 10px;
        }
        .er p{
            width: 100px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="yi">
            <figure>
                <img src="../img/1.png" alt="">
                <p>.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。
                    每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。</p>
            </figure>
        </div>
        <div class="kong"></div>
        <div class="er">
            <div class="tu1 sp1">
                <img src="../img/big_8.jpg" alt="">
                <div class="zhezhao1 zz1">
                    <h3>speclal品牌旗舰店</h3>
                    <p>返回一个jQuery对象遍历jQuery集合中的元素 - 被称为隐式迭代的过程。</p>
                </div>
            </div>
            <div class="tu1 sp2">
                <img src="../img/big_9.jpg" alt="">
                <div class="zhezhao1 zz2">
                    <h3>speclal品牌旗舰店</h3>
                    <p>当这种情况发生时，它通常不需要显式地循环的.each()方法</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>

    $('#top .kong').hover(function(){
        $('.kong').css('border','4px solid orange').fadeTo(2000,1);
    },function(){
        $('.kong').css('border','4px solid orange').fadeTo(1000,0);
    })


    // 图片的遮罩层显示和隐藏
    $('.er .sp1').hover(function(){
        $('.zz1').animate({width:154,opacity:1},'slow');
    },function(){
        $('.zz1').animate({width:0,opacity:0},'slow');
    });

    $('.er .sp2').hover(function(){
        $('.zz2').animate({width:154,opacity:1},'slow');
    },function(){
        $('.zz2').animate({width:0,opacity:0},'slow');
    });

</script>